import { memo } from 'react'
import styles from './index.module.scss'
import QuestionCard from '@/components/QuestionCard'
import { useTitle } from 'ahooks'
import { Typography, Empty, Spin } from 'antd'
import ListSearch from '@/components/ListSearch'
import useQuestionDataList from '@/hooks/useQuestionListData'
import { questionListItemType } from '@/types'
import ListPage from '@/components/ListPage'
import { questionType } from '@/types/enum'

const List = memo(() => {
  useTitle('星标问卷')
  const { Title } = Typography

  const { loading, list, total } = useQuestionDataList({
    type: questionType.starQuetion,
  })

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      {(loading && (
        <div style={{ textAlign: 'center' }}>
          <Spin size="large" />
        </div>
      )) || (
        <>
          <div className={styles.content}>
            {(list.length === 0 && <Empty description={'暂无数据'} />) ||
              list.map((q: questionListItemType) => <QuestionCard key={q._id} {...q} />)}
          </div>
          <div className={styles.footer}>{total > 0 && <ListPage total={total} />}</div>
        </>
      )}
    </>
  )
})

export default List
